<template>
	<view>
		<!-- 顶部导航栏 -->
		<view class="header">
			<x-status-bar></x-status-bar>
			<view class="flex-center-between header-navbar">
				<x-back-btn></x-back-btn>
				<view class="u-f-40 common-title">{{ lang_personal.myCollect }}</view>
				<view></view>
			</view>
			
			<!-- tabs -->
			<view class="flex-center-around" style="padding: 40rpx 0 18rpx;">
				<view
				v-for="(item, index) in tabs"
				:key="index"
				:class="['u-f-36 u-lh-50 tab-item', index === tabIndex ? 'font-medio' : 'color-grew']"
				@click="tabIndex = index">
					<view class="flex-center">{{ lang_common[item.key] }}</view>
					
					<view v-if="tabIndex === index" class="tab-item-line"></view>
				</view>
			</view>
			<!-- 分割线 -->
			<u-gap height="1" bgColor="rgba(0, 0, 0, 0.07)"></u-gap>
		</view>
		
		<!-- 列表 -->
		<swiper style="height: calc(100vh - 320rpx - var(--status-bar-height));" :current="tabIndex"
			@change="tabIndex = $event.detail.current">
			<swiper-item v-for="(item, index) in tabs" :key="index">
				<collect-list ref="mescrollItem" :i="index" :index="tabIndex" :updateStatus="updateStatus" @phone="settingValue = 'contact'"></collect-list>
			</swiper-item>
		</swiper>
		
		<permission-unAuthTips v-model="settingValue"></permission-unAuthTips>
	</view>
</template>

<script>
	import CollectList from './components/collect-list.vue'
	export default {
		components: { CollectList },
		data() {
			// 初始化顶部导航栏
			let tabs = ['commodity', 'business', 'shopNote'].map((item, index) => {
				let result = {
					key: item,
					value: index
				}
				return result
			})
			
			return {
				tabs,
				tabIndex: 0,
				updateStatus: '',
				
				settingValue: ''
			}
		},
		onShow() {
			this.updateStatus = '1'
			this.timer = setTimeout(() => {
				this.updateStatus = ''
			}, 100)
		}
	}
</script>

<style scoped lang="scss">
	.tab-item {
		position: relative;
		top: 0;
		left: 0;
		width: max-content;
		
		&-line {
			position: absolute;
			bottom: -18rpx;
			left: 50%;
			transform: translateX(-50%);
			width: 82rpx;
			height: 4rpx;
			background: #333333;
		}
	}
</style>
